<template>
	<view class="">
		<!-- 微信授权手机号一键登录 -->
		<view class="wechat-auth" :style="{ 'padding-top': isheight ? vuex_custom_bar_height + 'px' : '0' }">
			<button class="btn-normal" open-type="getPhoneNumber" @getphonenumber="handelMpWeixinMobileLogin($event)"
				@click="clickPhoneNumber">
				<view class="wechat-auth-container tn-flex tn-flex-row-center  tn-flex-col-center">
					<image class="icon" src="/static/image/wechat.png"></image>
					<text class="title">微信手机号一键登录</text>
				</view>
			</button>
		</view>
	</view>


</template>

<script>
	import store from '@/store'
	import {
		isEmpty,
		inArray
	} from '@/utils/util'

	export default {
		props: {
			// 是否存在第三方用户信息
			isParty: {
				type: Boolean,
				default: () => false
			},
			// 第三方用户信息数据
			partyData: {
				type: Object
			},
			isheight: {
				type: Boolean,
				default: () => true
			}
		},

		data() {
			return {
				// 微信小程序登录凭证 (code)
				// 提交到后端，用于换取openid
				code: '',
				oauth: ''
			}
		},
		created() {
			/*#ifdef APP-PLUS*/
			this.partyData.oauth = "app"
			/*#endif*/
			/*#ifdef H5*/
			this.partyData.oauth = "H5"
			/*#endif*/
			/*#ifdef MP*/
			this.partyData.oauth = "MP-WEIXIN"
			/*#endif*/
		},
		methods: {

			// 按钮点击事件: 获取微信手机号按钮
			// 实现目的: 在getphonenumber事件触发之前获取微信登录code
			// 因为如果在getphonenumber事件中获取code的话,提交到后端的encryptedData会存在解密不了的情况
			async clickPhoneNumber() {
				this.code = await this.getCode()
			},

			// 微信授权获取手机号一键登录
			// getphonenumber事件的回调方法
			async handelMpWeixinMobileLogin({
				detail
			}) {
				const app = this
				if (detail.errMsg != 'getPhoneNumber:ok') {
					console.log('微信授权获取手机号失败', detail.errMsg)
					// app.$error(detail.errMsg)
					return
				}
				if (detail.errMsg == 'getPhoneNumber:ok') {
					app.isLoading = true

					store.dispatch('LoginMpWxMobile', {
							code: app.code,
							encryptedData: detail.encryptedData,
							iv: detail.iv,
							isParty: app.isParty,
							partyData: app.partyData,
							refereeId: store.getters.refereeId
						})
						.then(result => {
							// 显示登录成功
							app.$toast('登录成功')
							// 相应全局事件订阅: 刷新上级页面数据
							uni.$emit('syncRefresh', true)
							// 跳转回原页面
							setTimeout(() => app.onNavigateBack(1), 2000)
						})
						.catch(err => {
							console.log(err);
							const resultData = err.result
							// // 显示错误信息
							if (isEmpty(resultData)) {
							  app.$toast('登录失败')
							}
							// 跳转回原页面
							if (resultData.isBack) {
							  setTimeout(() => app.onNavigateBack(1), 2000)
							}
						})
						.finally(() => app.isLoading = false)
				}
			},

			// 获取微信登录的code
			// https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
			getCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: res => {
							console.log('code', res.code)
							resolve(res.code)
						},
						fail: reject
					})
				})
			},

			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
				} else {
					this.$navTo('pages/index/index')
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	// 微信授权登录
	.wechat-auth {
		width: 400rpx;
		margin: 50rpx auto 0 auto;

		.wechat-auth-container {
			display: flex;
			justify-content: center;
		}

		.icon {
			width: 38rpx;
			height: 38rpx;
			margin-right: 15rpx;
		}

		.title {
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>